<template>
	<view class="container">
		<view class="chat-area">
			<!-- 聊天消息列表 -->
			<view v-for="(message, index) in messages" 
			:key="index" 
			:class="{'other_box': message.who == 'other','my_box': message.who != 'other' }" 
			ref="myBox">
				<view class="my-message" 
				ref="myMsg"
				:class="{'other_message': message.who == 'other','my-message': message.who != 'other' }" >
					{{ message.msg }}
				</view>
			</view>
			
		</view>
		<view class="input-area">
			<input type="text" placeholder="请输入消息" class="input-box" v-model="newMessage" />
			<button class="send-btn" @click="sendMessage">发送</button>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations, mapGetters} from "vuex";
	export default {
		data() {
			return {
				messages: [
					
				],
				newMessage: '',
				// 目标聊天对象
				targetName:"",
				targetItem:""
			};
		},
		computed:{
			// 获取当前登录的用户姓名
			...mapState("my_user",["loginUserName"]),
			...mapState('my_chatHistory',["flag"]),
			...mapGetters('my_chatHistory', ['getChatObj']),
		},
		watch:{
			flag(newValue, oldValue){
				console.log("flag改变，新值为：",newValue,"旧值为：",oldValue);
				if (newValue) {
					// 重新获取vuex中的数据
					const chatItem =  JSON.parse(this.getChatObj(this.targetName));
					console.log("获取信息消息项：",chatItem);
					// 获取最新收到的消息
					const obj = chatItem.chatContents[0];
					console.log(obj,"/*/*/*/新消息");
					this.messages.push({msg:obj.content, who:obj.who})
					// 将标识还原
					this.setFlag(false);
				}
			},
		},
		onLoad(option) {
			// 获取聊天学生的姓名
			
			// 根据学生名获取vuex中的聊天项
			this.targetItem = JSON.parse(option.targetItem)
			this.targetName = this.targetItem.name
			console.log(this.targetItem);
			// 动态修改页面标题
			wx.setNavigationBarTitle({
			   title: this.targetName
			})
			// 动态渲染聊天记录
			this.initMsg();
		},
		mounted() {
			 console.log("=-=-=-=", );
		},
		methods: {
			...mapMutations('my_chatHistory',['addChatList','setFlag']),
			initMsg(){
				const arr =  this.targetItem.chatContents.reverse()
				for(let item of arr){
					this.messages.push({msg:item.content, who:item.who})
				}
			},
			// 发送消息
			sendMessage() {
				if (this.newMessage) {
					// 构造对象
					const tempObj = {msg:this.newMessage, who:"my"}
					// 向服务器发送私聊内容，让服务器进行转发
					uni.sendSocketMessage({
						// 连接，用于接收重载信息
						data: "@@" + this.targetName + " " + this.newMessage
					});
					// 加入列表，显示聊天记录 
					this.messages.push(tempObj);
					this.newMessage = '';
				}
			}
		},
	}
</script>

<style lang="less">
.my_box{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		height: max-content;
		padding: 5px;
		overflow: auto;
		overflow-wrap: break-word;
	}
	
	.my-message {
		background-color: #007aff;
		color: #fff;
		border-radius: 10px;
		padding: 10px;
		margin: 5px;
		font-family: "幼圆";
	}
	
	.other_box{
		display: flex;
		flex-direction: row;
		justify-content: left;
		height: max-content;
		padding: 5px;
		overflow: auto;
		overflow-wrap: break-word;
	}
	
	.other_message {
		background-color: #b37de1;
		color: #fff;
		border-radius: 10px;
		padding: 10px;
		margin: 5px;
		font-family: "幼圆";
	}
	
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.chat-area {
		padding: 10px;
		flex: 1;
		overflow-y: scroll;
	}
	.input-area {
		display: flex;
		align-items: center;
		padding: 10px;
		background-color: #f5f5f5;
	}
	.input-box {
		flex: 1;
		height: 40px;
		padding: 0 10px;
		border-radius: 20px;
		border: none;
		background-color: #fff;
	}
	.send-btn {
		margin-left: 10px;
		width: 80px;
		height: 40px;
		border-radius: 20px;
		border: none;
		background-color: #007aff;
		color: #fff;
		font-size: 16px;
	}
</style>
